<template>
  <div class="productFunction">
    <div class="header">
      <div class="header-top">
        <div class="navbar">
          <div class="logo">
            <a class="navbar-logo" href="#">
              <img alt="logo" src="../../static/icon/logos.png"> 小微助手
            </a>
          </div>
          <ul>
            <li>
              <router-link to="/Home">首页</router-link>
            </li>
            <li>
              <router-link to="/ProductFunction">产品功能</router-link>
            </li>
            <li>
              <router-link to="/ContactUs">联系我们</router-link>
            </li>
            <li>
              <router-link to="/BuyNow" style="color:#FFFF00">我也想要</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="header-banner">
        <div class="banner">
        <div class="banner-left">
          <h2>小微助手</h2>
          <p>小微助手是目前市面上功能领先，性价比较高的社群管理工具。基础版0元/年（带信息推送）或基础版50元/年，拥有自动引流、关键词自动回复、定时通知、数据分析、踢人、多群管理等数十项功能。</p>
          <button>立即购买</button>
        </div>
        <div class="banner-right">
          <div class="img-box">
            <img src="../../static/images/weixin.jpg">
            <p>扫码立即购买</p>
          </div>
        </div>
      </div>
      </div>
    </div>
    <div class="content content-1">
      <table class="tb-fu">
        <thead>
          <tr>
            <td colspan="2">小微助手基础版：58元/年或0元/年（带信息推送）</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="tit">入群欢迎语</td>
            <td class="txt">图文、链接；可多条随机发送</td>
          </tr>
          <tr>
            <td class="tit">关键词自动回复</td>
            <td class="txt">方便快捷</td>
          </tr>
          <tr>
            <td class="tit">自动引流</td>
            <td class="txt">邀人进群；邀请统计、入退群数据</td>
          </tr>
          <tr>
            <td class="tit">群成员管理</td>
            <td class="txt">设置多个管理员；潜水查询，成员发言数等</td>
          </tr>
          <tr>
            <td class="tit">群签到</td>
            <td class="txt">自动签到、签到排名、签到任务及奖励</td>
          </tr>
          <tr>
            <td class="tit">群数据分析</td>
            <td class="txt">签到、发言数、邀请等排行统计；潜水统计</td>
          </tr>
          <tr>
            <td class="tit">群积分</td>
            <td class="txt">群成员积分体系、等级设置</td>
          </tr>
        </tbody>
      </table>
      <p class="more-free">更多功能 持续免费优化</p>
    </div>
    <!-- <div class="line-10" style="width:100%;height:10px;background:#F8F8F8"></div>
    <div class="content-2 content">
      <div class="container elcontainer">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="内容模块(38元/年)" name="first">
            <div class="modular-ds">
              <div class="modular-ds-left">
                <div class="phone">
                  <div class="bg">
                    <img src="../../static/images/pic-06.png">
                  </div>
                  <div class="img-box">
                    <img src="../../static/images/pic-01.png">
                  </div>
                </div>
              </div>
              <div class="modular-ds-right">
                <table class="tb">
                  <caption>
                    <i></i>功能&amp;优点</caption>
                  <tbody>
                    <tr>
                      <td>
                        <span class="tit">聊天记录保存</span>
                      </td>
                      <td>评论、打赏、可分享</td>
                    </tr>
                    <tr>
                      <td>
                        <span class="tit">群文件</span>
                      </td>
                      <td>支持多格式、不限数量</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="娱乐模块(28元/年)" name="second">
            <div class="modular-ds">
              <div class="modular-ds-left">
                <div class="phone">
                  <div class="bg">
                    <img src="../../static/images/pic-06.png">
                  </div>
                  <div class="img-box">
                    <img src="../../static/images/pic-01.png">
                  </div>
                </div>
              </div>
              <div class="modular-ds-right">
                <table class="tb">
                  <caption>
                    <i></i>功能&amp;优点</caption>
                  <tbody>
                    <tr>
                      <td>
                        <span class="tit">群游戏</span>
                      </td>
                      <td>智能聊天、成语接龙</td>
                    </tr>
                    <tr>
                      <td></td>
                      <td>猜歌、猜谜、猜图、猜声音</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="护群模块(59元/年)" name="third">
            <div class="modular-ds">
              <div class="modular-ds-left">
                <div class="phone">
                  <div class="bg">
                    <img src="../../static/images/pic-06.png">
                  </div>
                  <div class="img-box">
                    <img src="../../static/images/pic-01.png">
                  </div>
                </div>
              </div>
              <div class="modular-ds-right">
                <table class="tb">
                  <caption>
                    <i></i>功能&amp;优点</caption>
                  <tbody>
                    <tr>
                      <td>
                        <span class="tit">自动移除成员</span>
                      </td>
                      <td>黑名单、敏感词，潜水等&nbsp;</td>
                    </tr>
                    <tr>
                      <td>
                        <span class="tit">快捷移除成员</span>
                      </td>
                      <td>管理员移除群成员、批量移除</td>
                    </tr>
                    <tr>
                      <td>
                        <span class="tit">成员移除记录</span>
                      </td>
                      <td>退群提醒、踢出原因记录&nbsp;</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'ProductFunction',
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .header-top{
    width: 100%;
    background-color: #3CA297;
  }

  .header-banner{
    width: 100%;
    background-color: #3CA297;
  }

  .banner {
    width: 1000px;
    margin: 0 auto;
  }

  .elcontainer .el-tabs__nav-wrap::after {
    height: 0px;
  }
  .elcontainer .el-tabs__active-bar {
    height: 0px;
  }
  .elcontainer .el-tabs__nav {
    width: 100%;
    clear: left;
    text-align: center;
  }
  .elcontainer .el-tabs__item {
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    margin: 0 16px;
    /* background: #6be2b5; */
  }
  .elcontainer .el-tabs__item.is-active {
    background: #6be2b5;
    border-radius: 30px;
    color: #333;
  }
  .elcontainer .el-tabs--top .el-tabs__item.is-top:last-child {
    padding-right: 15px;
  }
  .elcontainer .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 15px;
  }
  .elcontainer .el-tabs__item.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -35px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #6be2b5;
  }
  .modular-ds .modular-ds-left {
    display: table-cell;
    vertical-align: middle;
    padding-right: 42px;
  }
  .modular-ds .modular-ds-left .phone {
    position: relative;
  }
  .modular-ds .modular-ds-left .phone .bg {
    position: relative;
    /* display: inline-block; */
    z-index: 1;
  }
  .modular-ds .modular-ds-left .phone .bg img {
    width: 240px;
    vertical-align: middle;
  }
  .modular-ds .modular-ds-left .phone .img-box {
    position: absolute;
    top: 33px;
    left: 43px;
    width: 181px;
    height: 300px;
  }
  .modular-ds .modular-ds-left .phone .img-box img {
    width: 100%;
    height: auto;
  }
  .modular-ds .modular-ds-right {
    display: table-cell;
    vertical-align: middle;
  }
  .modular-ds .modular-ds-right .tb {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
    color: #666;
  }
  .modular-ds .modular-ds-right .tb caption {
    height: 50px;
    text-align: center;
    font-size: 16px;
    color: #333;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .modular-ds .modular-ds-right .tb caption i {
    position: relative;
    top: -1px;
    margin-right: 10px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../../static/icon/icon-03.png) center no-repeat;
    vertical-align: middle;
  }
  .modular-ds .modular-ds-right .tb tbody td {
    padding: 10px 0;
  }
  .modular-ds .modular-ds-right .tb tbody .tit {
    margin-right: 15px;
    padding: 2px 15px;
    line-height: 1;
    display: block;
    background: #6be2b5;
    color: #333;
    border-radius: 30px;
    text-align: center;
  }
</style>
